<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>页面管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索页面</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">标题</label>
                            <div class="layui-input-inline">
                                <input type="text" name="pageTitle" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">分类</label>
                            <div class="layui-input-inline">
                                <input type="text" name="pageClass" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">路径</label>
                            <div class="layui-input-inline">
                                <input type="text" name="pagePath" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="page-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
            </div>
        </script>
        <table class="layui-hide" id="pageTable" lay-filter="pageTableFilter"></table>
        <script type="text/html" id="pageTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>
        <!-- 编辑/添加弹窗 -->
        <div id="editPage" style="display: none">
            <div class="layui-form layuimini-form" lay-filter="editPageForm">
                <div class="layui-form-item" id="pageId-laylabel">
                    <label class="layui-form-label">页面ID</label>
                    <div class="layui-input-inline">
                        <input type="text" name="pageId" placeholder="自动生成" readonly value="" class="layui-input layui-disabled">
                    </div>
                </div>
                <div class="layui-form-item" id="pageTitle-laylabel">
                    <label class="layui-form-label required">标题</label>
                    <div class="layui-input-inline">
                        <input type="text" name="pageTitle" lay-verify="required" lay-reqtext="标题不能为空" placeholder="请输入页面标题" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" id="pageClass-laylabel">
                    <label class="layui-form-label required">分类</label>
                    <div class="layui-input-inline">
                        <input type="text" name="pageClass" lay-verify="required" lay-reqtext="分类不能为空" placeholder="请输入分类" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" id="pageChild-laylabel">
                    <label class="layui-form-label">子模块</label>
                    <div class="layui-input-inline">
                        <input type="text" name="pageChild" placeholder="请输入子模块" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" id="pageIcon-laylabel">
                    <label class="layui-form-label">页面图标</label>
                    <div class="layui-input-inline">
                        <input type="text" name="pageIcon" id="pageIconInput" placeholder="请选择页面图标" value="" class="layui-input" lay-filter="pageIconFilter">
                    </div>
                </div>
                <div class="layui-form-item" id="pageLevel-laylabel">
                    <label class="layui-form-label">等级</label>
                    <div class="layui-input-inline">
                        <select name="pageLevel" lay-verify="">
                            <option value="">请选择等级</option>
                            <option value="1">普通用户</option>
                            <option value="2">普通管理员</option>
                            <option value="3">系统管理员</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" id="pageClassIcon-laylabel">
                    <label class="layui-form-label">分类图标</label>
                    <div class="layui-input-inline">
                        <input type="text" name="pageClassIcon" id="pageClassIconInput" placeholder="请选择分类图标" value="" class="layui-input" lay-filter="pageClassIconFilter">
                    </div>
                </div>
                <div class="layui-form-item" id="pagePath-laylabel">
                    <label class="layui-form-label required">路径</label>
                    <div class="layui-input-inline">
                        <input type="text" name="pagePath" lay-verify="required" lay-reqtext="路径不能为空" placeholder="请输入页面路径" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="savePageBtn">确认保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
        // 全局设置ajax请求头
        $.ajaxSetup({
            beforeSend: function(xhr) {
                const data = JSON.parse(localStorage.getItem('user'));
                //输出token
                console.log(data.token);
                if (data.token) {
                    xhr.setRequestHeader('Authorization', 'Bearer ' + data.token);
                }
            }
        });
        const userStr = localStorage.getItem('user');
        // 转换为 JS 对象
        const user = JSON.parse(userStr);
        
        // 图标选择器初始化标志
        var iconPickersInitialized = false;

        // 先渲染表格，确保基本功能正常
        table.render({
            elem: '#pageTable',
            url: '/page/query',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'pageId', width: 80, title: 'ID', sort: true},
                {field: 'pageTitle', width: 120, title: '标题'},
                {field: 'pageClass', width: 100, title: '分类'},
                {field: 'pageChild', width: 100, title: '子模块'},
                {field: 'pageIcon', width: 120, title: '页面图标', templet: function(d){ 
                    return d.pageIcon ? '<i class="' + d.pageIcon + '" style="font-size:16px;"></i> ' + d.pageIcon : ''; 
                }},
                {field: 'pageLevel', width: 120, title: '页面等级', templet: function(d){
                    var levelText = '';
                    switch(d.pageLevel) {
                        case 1:
                            levelText = '普通用户';
                            break;
                        case 2:
                            levelText = '普通管理员';
                            break;
                        case 3:
                            levelText = '系统管理员';
                            break;
                        default:
                            levelText = d.pageLevel || '';
                    }
                    return levelText;
                }},
                {field: 'pageClassIcon', width: 120, title: '分类图标', templet: function(d){ 
                    return d.pageClassIcon ? '<i class="' + d.pageClassIcon + '" style="font-size:16px;"></i> ' + d.pageClassIcon : ''; 
                }},
                {field: 'pagePath', width: 180, title: '路径'},
                {title: '操作', minWidth: 180, toolbar: '#pageTableBar', align: "center",fixed: 'right'}
            ]],
            limits: [5, 10, 20, 50],
            limit: 10,
            page: true,
            skin: 'line'
        });

        // 初始化图标选择器（可选功能）
        function initIconPickers() {
            // 如果已经初始化过，直接返回
            if (iconPickersInitialized) {
                return;
            }
            
            try {
                // 尝试加载图标选择器模块
                layui.use(['iconPickerFa'], function() {
                    var iconPickerFa = layui.iconPickerFa;
                    if (iconPickerFa) {
                        // 页面图标选择器
                        iconPickerFa.render({
                            elem: '#pageIconInput',
                            url: '../lib/font-awesome-4.7.0/less/variables.less',
                            search: true,
                            page: true,
                            limit: 12,
                            click: function (data) {
                                $('#pageIconInput').val("fa "+data.icon);
                            },
                            success: function (d) {
                                console.log('页面图标选择器初始化成功');
                            }
                        });

                        // 分类图标选择器
                        iconPickerFa.render({
                            elem: '#pageClassIconInput',
                            url: '../lib/font-awesome-4.7.0/less/variables.less',
                            search: true,
                            page: true,
                            limit: 12,
                            click: function (data) {
                                $('#pageClassIconInput').val("fa "+data.icon);
                            },
                            success: function (d) {
                                console.log('分类图标选择器初始化成功');
                            }
                        });
                        
                        // 标记为已初始化
                        iconPickersInitialized = true;
                    }
                });
            } catch (e) {
                console.log('图标选择器加载失败，但不影响基本功能');
            }
        }

        // 监听搜索操作
        form.on('submit(page-search-btn)', function (data) {
            table.reload('pageTable', {
                page: { curr: 1 },
                where: data.field
            });
            return false;
        });

        // 工具栏监听 - 添加
        table.on('toolbar(pageTableFilter)', function (obj) {
            if (obj.event === 'add') {
                $("#pageId-laylabel").hide();
                form.val("editPageForm", {
                    pageId: '',
                    pageTitle: '',
                    pageClass: '',
                    pageChild: '',
                    pageIcon: '',
                    pageLevel: '',
                    pageClassIcon: '',
                    pagePath: ''
                });
                index = layer.open({
                    title: '添加页面',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['600px', '600px'],
                    content: $("#editPage"),
                    success: function() {
                        // 弹窗打开后初始化图标选择器
                        setTimeout(function() {
                            initIconPickers();
                        }, 100);
                    }
                });
            }
        });

        // 行内按钮监听 - 编辑/删除
        table.on('tool(pageTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                $("#pageId-laylabel").show();
                form.val("editPageForm", data);
                index = layer.open({
                    title: '编辑页面',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['600px', '600px'],
                    content: $("#editPage"),
                    success: function() {
                        // 弹窗打开后初始化图标选择器
                        setTimeout(function() {
                            initIconPickers();
                        }, 100);
                    }
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('确定删除该页面？', function (index) {
                    $.post("/page/delete", {pageId: data.pageId}, function (res) {
                        if (res.code === 0) {
                            layer.msg("删除成功");
                            obj.del();
                        } else {
                            layer.msg(res.msg || "删除失败");
                        }
                    });
                    layer.close(index);
                });
            }
        });

        // 表单提交监听
        form.on('submit(savePageBtn)', function (data) {
            var field = data.field;
            var url = field.pageId ? "/page/update" : "/page/add";
            $.post(url, field, function (res) {
                if (res.code === 0) {
                    layer.msg(field.pageId ? "更新成功" : "添加成功");
                    layer.closeAll();
                    table.reload('pageTable');
                } else {
                    layer.msg(field.pageId ? "更新失败" : "添加失败");
                }
            });
            return false;
        });
    });
</script>
</body>
</html> 